/* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this
work for additional information regarding copyright ownership. * The ASF licenses this file to You under the Apache License, Version 2.0 * (the
"License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * *
http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is
distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific
language governing permissions and * limitations under the License. */
<template>
  <m-list-construction title="机主申请">
    <template slot="content">
      <div>
        <el-form
          ref="myform"
          :model="form"
          size="mini"
          label-position="left"
          label-width="180px"
          :rules="rules"
        >
          <mPannel height="220px">
            <img
              src="../../../../operation/pages/index/_source/image/billing/Group.png"
              style="margin-top:30px"
            >
          </mPannel>
          <!-- 合作类型 -->
          <mPannel
            title="请选择合作类型"
            height="70px"
          >
            <el-radio-group
              v-model="form.type"
              size="small"
              class="group"
            >
              <el-radio :label="0">个人机主申请</el-radio>
              <el-radio :label="1">企业机主申请</el-radio>
            </el-radio-group>
          </mPannel>
          <!-- 机器信息 -->
          <mPannel
            title="机器信息"
            height="400px"
          >
            <el-form-item
              label="GPU型号"
              prop="number"
              class="item"
            >
              <el-input
                type="input"
                v-model="number"
                size="mini"
                style="width:300px"
                placeholder="请输入GPU型号"
              > </el-input>
            </el-form-item>
            <el-form-item
              label="GPU数量"
              prop="number"
            >
              <el-input
                type="input"
                v-model="number"
                size="mini"
                style="width:300px"
                placeholder="请输入GPU数量"
              > </el-input>
            </el-form-item>
            <el-form-item
              label="网络宽带"
              prop="number"
            >
              <el-input
                type="input"
                v-model="number"
                size="mini"
                style="width:300px"
                placeholder="请输入网络宽带信息"
              > </el-input>
            </el-form-item>
            <el-form-item
              label="最长合作时长"
              prop="number"
              style="margin-bottom: 0px;"
            >
              <el-input
                type="input"
                v-model="number"
                size="mini"
                style="width:300px"
                placeholder="请输入最长合作时长，如一个月，半年"
              > </el-input>
            </el-form-item>
            <div class="more">请填写更详细的配置信息，以使我们评估效益</div>
            <el-form-item
              label="CPU"
              prop="noRequired"
            >
              <el-input
                type="input"
                v-model="noRequired"
                size="mini"
                style="width:300px"
                placeholder="请输入CPU信息"
              > </el-input>
            </el-form-item>
            <el-form-item
              label="内存"
              prop="noRequired"
            >
              <el-input
                type="input"
                v-model="noRequired"
                size="mini"
                style="width:300px"
                placeholder="请输入内存信息"
              > </el-input>
            </el-form-item>
            <el-form-item
              label="硬盘"
              prop="noRequired"
            >
              <el-input
                type="input"
                v-model="noRequired"
                size="mini"
                style="width:300px"
                placeholder="请输入硬盘信息"
              > </el-input>
            </el-form-item>
          </mPannel>
          <!-- 个人基本信息 -->
          <mPannel
            title="基本信息"
            height="650px"
            v-if="form.type===0"
          >
            <el-form-item
              label="真实姓名"
              prop="number"
              class="item"
            >
              <el-input
                type="input"
                v-model="number"
                size="mini"
                style="width:300px"
                placeholder="请输入您的真实姓名"
              > </el-input>
            </el-form-item>
            <el-form-item
              label="联系电话"
              prop="number"
            >
              <el-input
                type="input"
                v-model="number"
                size="mini"
                style="width:300px"
                placeholder="请输入您的联系电话"
              > </el-input>
            </el-form-item>
            <el-form-item
              label="邮箱"
              prop="number"
            >
              <el-input
                type="input"
                v-model="number"
                size="mini"
                style="width:300px"
                placeholder="请输入您的邮箱"
              > </el-input>
            </el-form-item>
            <el-form-item
              label="公司/学校名称"
              prop="number"
            >
              <el-input
                type="input"
                v-model="number"
                size="mini"
                style="width:300px"
                placeholder="请输入您的公司/学校名称"
              > </el-input>
            </el-form-item>
            <el-form-item
              label="身份证号码"
              prop="number"
            >
              <el-input
                type="input"
                v-model="number"
                size="mini"
                style="width:300px"
                placeholder="请输入您的身份证号码"
              > </el-input>
            </el-form-item>
            <el-form-item
              label="身份证照片       "
              prop="number"
            >
              <div class="flexBox">
                <mUpload
                  v-model="number"
                  tip="请上传人像面"
                  style="margin-right:20px"
                />
                <mUpload
                  v-model="number"
                  tip="请上传国徽面"
                />
              </div>
              <div class="tip">支持JPG、JPEG、PNG格式、图片大小不超过5MB，营业执照 中信息必须与工商信息一致，上传图片</div>
            </el-form-item>
            <el-form-item
              label="备注"
              prop="noRequired"
            >
              <el-input
                type="input"
                v-model="noRequired"
                size="mini"
                style="width:300px"
                placeholder="请输入您的留言"
              > </el-input>
            </el-form-item>
            <el-form-item
              label=""
              prop="checked"
            >
              <el-checkbox v-model="form.checked">
                <span style="font-size: 14px">我已阅读并同意</span><span class="check">《云资源交易平台机主协议》</span>
              </el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="mini"
                style="width:180px;height:40px"
              >提交</el-button>
            </el-form-item>
          </mPannel>
          <div v-else>
            <!-- 基本信息 -->
            <mPannel
              title="基本信息"
              height="350px"
            >
              <el-form-item
                label="企业/学校名称"
                prop="number"
                class="item"
              >
                <el-input
                  type="input"
                  v-model="number"
                  size="mini"
                  style="width:300px"
                  placeholder="工商营业执照的企业全称，只支持中国大陆"
                > </el-input>
              </el-form-item>
              <el-form-item
                label="统一社会信用代码"
                prop="number"
              >
                <el-input
                  type="input"
                  v-model="number"
                  size="mini"
                  style="width:300px"
                  placeholder="请输入18位统一社会信用代码或15位营业执照注册号"
                > </el-input>
              </el-form-item>
              <el-form-item
                label="营业执照"
                prop="number"
              >
                <mUpload v-model="number" />
                <div class="tip">支持JPG、JPEG、PNG格式、图片大小不超过5MB，营业执照 中信息必须与工商信息一致，上传图片</div>
                <div class="tip">必须为实物图片，并且露出四个角，上传图片\t如果不够清晰，会审核不通过。</div>
              </el-form-item>
            </mPannel>
            <!-- 合作信息 -->
            <mPannel
              title="合作信息"
              height="400px"
            >
              <el-form-item
                label="您联系人姓名"
                prop="number"
                class="item"
              >
                <el-input
                  type="input"
                  v-model="number"
                  size="mini"
                  style="width:300px"
                  placeholder="请输入您联系人姓名"
                > </el-input>
              </el-form-item>
              <el-form-item
                label="您的职业"
                prop="number"
              >
                <el-input
                  type="input"
                  v-model="number"
                  size="mini"
                  style="width:300px"
                  placeholder="请输入您的职业"
                > </el-input>
              </el-form-item>
              <el-form-item
                label="联系方式"
                prop="number"
              >
                <el-input
                  type="input"
                  v-model="number"
                  size="mini"
                  style="width:300px"
                  placeholder="请输入您的联系方式"
                > </el-input>
              </el-form-item>
              <el-form-item
                label="您的邮箱"
                prop="number"
              >
                <el-input
                  type="input"
                  v-model="number"
                  size="mini"
                  style="width:300px"
                  placeholder="请输入您的邮箱"
                > </el-input>
              </el-form-item>
              <el-form-item
                label="备注"
                prop="noRequired"
              >
                <el-input
                  type="input"
                  v-model="noRequired"
                  size="mini"
                  style="width:300px"
                  placeholder="请输入您的留言"
                > </el-input>
              </el-form-item>
              <el-form-item
                label=""
                prop="checked"
              >
                <el-checkbox v-model="form.checked">
                  <span style="font-size: 14px">我已阅读并同意</span><span class="check">《云资源交易平台机主协议》</span>
                </el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="mini"
                  style="width:180px;height:40px"
                >提交</el-button>
              </el-form-item>
            </mPannel>
          </div>
        </el-form>
      </div>
    </template>
  </m-list-construction>
</template>
<script>
  import mListConstruction from '@/module/components/listConstruction/listConstruction'
  import mPannel from './pannel.vue'
  import mUpload from './upload.vue'
  export default {
    name: 'application-ownerApplication',
    data () {
      return {
        form: {
          type: 0,
          checked: false,
        },
        rules: {
          number: [{ required: true, message: '不能为空', trigger: 'blur' }],
        },
      }
    },
    mixins: [],
    props: {},
    methods: {},
    watch: {},
    created () { },
    mounted () { },
    beforeDestroy () { },
    components: { mListConstruction, mPannel, mUpload },
  }
</script>

<style lang="scss" scoped>
.flexBox {
  display: flex;
}
/deep/.el-radio__label {
  font-size: 14px;
}
/deep/.el-input--mini {
  height: 30px;
  .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
}
.tip {
  text-wrap: nowrap;
  color: #999999;
  font-size: 12px;
  margin: 0;
}
.careTip {
  position: relative;
  display: flex;
  margin: 10px 0;
  line-height: 50px;
  height: 50px;
  background: #fff;
  padding-left: 20px;
  box-sizing: border-box;
}
.info {
  background: #fff;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}
.leftText {
  font-size: 14px;
  font-weight: bold;
  height: 28px;
  line-height: 28px;
}
.more {
  margin-top: 10px;
  height: 33px;
  line-height: 33px;
  font-size: 14px;
  font-weight: bold;
}
.check {
  // height: 33px;
  // line-height: 33px;
  font-size: 12px;
  font-weight: bold;
  color: #4a4487;
}
::v-deep .el-form-item {
  margin-bottom: 20px;
}
::v-deep .group {
  display: flex;
  margin-left: 50px;
  label {
    margin-top: 10px;
    margin-bottom: 0px !important;
  }
}
::v-deep .el-form-item__label {
  font-size: 14px;
}
</style>
